<template>
	<navigatorComp title="实名认证" bgcColor="#121512" fontColor="#fff"></navigatorComp>

	<view v-if="!isAuth">
		<view class="auth_attention display_flex">
			<image src="http://112.124.50.179:8888/imgs/mine/attention.png" mode=""></image>
			根据国家相关法律法规要求，你需要填写身份证信息。完成实名认证，以免影响使用相关功能或服务
		</view>

		<view class="auth_box">
			<view class="auth_box_title">身份证信息</view>
			<view class="auth_box_title2">信息仅用于身份验证，我们将保障您的信息安全</view>
			<view class="auth_box_item">
				<view class="auth_box_item_title display_flex">姓名</view>
				<view class="display_flex">
					<u--input
						focus
						placeholder="请输入姓名"
						v-model.trim="authForm.name"
						fontSize="28rpx"
						color="#fff"
						border="none"
						inputAlign="right"
						maxlength="20"
						placeholderStyle="color:#999999;font-size:28rpx;"
					></u--input>
				</view>
			</view>
			<view class="auth_box_item">
				<view class="auth_box_item_title display_flex">身份证号</view>
				<view class="display_flex">
					<u--input
						placeholder="请输入身份证号"
						v-model.trim="authForm.cardId"
						fontSize="28rpx"
						color="#fff"
						border="none"
						inputAlign="right"
						maxlength="18"
						placeholderStyle="color:#999999;font-size:28rpx;"
					></u--input>
				</view>
			</view>
		</view>
		<view class="auth_xieyi">
			<view>
				<image
					src="http://112.124.50.179:8888/imgs/login/check.png"
					mode=""
					v-if="flag"
					@click="flag = !flag"
				></image>
				<image
					src="http://112.124.50.179:8888/imgs/login/not_check.png"
					mode=""
					v-else
					@click="flag = !flag"
				></image>
				已阅读并同意
				<text>《实名认证协议》</text>
			</view>
		</view>

		<view class="auth_btn display_flex">
			<myButton bgcColor="none" name="确定" width="400rpx" @clickBtn="handleConfirm"></myButton>
		</view>
	</view>

	<!-- 认证成功 -->
	<view v-else class="auth_card">
		<image src="http://112.124.50.179:8888/imgs/mine/auth_bgc.png" mode="widthFix"></image>
		<view class="auth_card_title">
			您已完成实名认证！
		</view>
		<view class="auth_card_info">
			姓名<text style="margin-left: 32rpx;">{{authForm.name}}</text>
		</view>
		<view class="auth_card_info">
			身份证号<text style="margin-left: 32rpx;">{{authForm.cardId}}</text>  
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import _ from 'lodash';
import { ref, reactive } from 'vue';
import navigatorComp from '@/components/navigator/index.vue';
import myButton from '@/components/button/index.vue';
import MineApi from '@/API/mine/index.js';
const mineApi = new MineApi();

const authForm = reactive({
	name: '',
	cardId: ''
});
const isAuth = ref(false); //是否认证过
const flag = ref(false); //是否同意协议

onLoad((options) => {
	if(Number(options.isAuth)){
		isAuth.value = true;
		authForm.name=options.name
		authForm.cardId = options.cardId
	}
});

const validate = () => {
	let cardIdRed =
		/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

	if (!authForm.name) {
		uni.showToast({
			title: '请输入姓名',
			icon: 'none',
			duration: 1000
		});
		return false;
	} else if (!cardIdRed.test(authForm.cardId)) {
		uni.showToast({
			title: '请输入正确的身份证号',
			icon: 'none',
			duration: 1000
		});
		return false;
	} else if (!flag.value) {
		uni.showToast({
			title: '请同意用户协议',
			icon: 'none',
			duration: 1000
		});
		return false;
	}
	return true;
};

const handleConfirm = _.throttle(function () {
	confirm();
}, 2000);

/**
 * 点击保存
 */
const confirm = () => {
	if (!validate()) {
		return;
	}
	mineApi.realNameRegistration({ ...authForm }).then((res) => {
		if (res.code === 0) {
			uni.showToast({
				title: '认证成功'
			});
			isAuth.value = true;
		}
	});
};

// 发送验证码
const getCode = () => {
	if (authForm.newauthNumber.length != 11) {
		uni.showToast({
			title: '请输入正确的手机号',
			icon: 'none',
			duration: 1000
		});
		return;
	}
	if (uCodeRef.value.canGetCode) {
		// 模拟向后端请求验证码
		uni.showLoading({
			title: '正在获取验证码'
		});
		// console.log(formData.authNumber)
		setTimeout(async () => {
			uni.hideLoading();
			let rst = await getCodeApi({
				authNumber: authForm.newauthNumber,
				smsType: '5' //1:注册，2:登录，3:修改密码，4:身份认证，5:更换手机号
			});
			if (rst.data.code == 0) {
				// 这里此提示会被start()方法中的提示覆盖
				uni.showToast({
					title: rst.data.msg,
					icon: 'success',
					duration: 1000
				});
				// 通知验证码组件内部开始倒计时
				uCodeRef.value.start();
			} else {
				uni.showToast({
					title: rst.data.msg,
					icon: 'none',
					duration: 1000
				});
			}
		}, 2000);
	} else {
		uni.showToast({
			title: '倒计时结束后再发送',
			icon: 'error',
			duration: 1000
		});
	}
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
}

.auth_attention {
	width: 100%;
	padding: 16rpx 34rpx 16rpx 32rpx;
	box-sizing: border-box;
	background: rgba(243, 224, 187, 0.9);
	font-weight: 400;
	font-size: 28rpx;
	color: #121512;
	line-height: 33rpx;
	margin-bottom: 40rpx;
	justify-content: flex-start;
	text-align: justify;

	image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 8rpx;
		flex-shrink: 0;
	}
}

.auth_box {
	padding: 40rpx 32rpx;
	box-sizing: border-box;
	margin: 32rpx 40rpx 0 32rpx;
	background: #292b2a;
	border-radius: 8rpx;

	.auth_box_title {
		font-weight: 400;
		font-size: 36rpx;
		color: #ffffff;
		line-height: 42rpx;
		margin-bottom: 24rpx;
	}

	.auth_box_title2 {
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 33rpx;
		margin-bottom: 48rpx;
	}

	.auth_box_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 40rpx;

		&:last-child {
			margin-bottom: 0;
		}

		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 8rpx;
		}

		.auth_box_item_title {
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 33rpx;
		}

		.placeholder {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			line-height: 33rpx;
		}

		.value {
			color: #ffffff;
		}

		.get_code {
			color: #f3e0bb;
			font-size: 28rpx;
			margin-left: 16rpx;
		}
	}
}

.auth_xieyi {
	margin-left: 32rpx;
	margin-top: 24rpx;
	color: #999999;
	font-size: 24rpx;
	view {
		display: flex;
		align-items: center;

		image {
			position: relative;
			top: 1px;
			width: 40rpx;
			height: 40rpx;
			margin-right: 8rpx;
		}
	}
	text {
		color: #4489fd;
	}
}

.auth_btn {
	width: 100%;
	margin-top: 200rpx;
}

.auth_card {
	height: 300rpx;
	margin: 24rpx 32rpx;
	position: relative;
	overflow: hidden;
	padding:48rpx;
	box-sizing: border-box;

	image {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}
	
	.auth_card_title{
		position: relative;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 36rpx;
		margin-bottom: 40rpx;
	}
	
	.auth_card_info{
		position: relative;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 33rpx;
		margin-bottom:16rpx;
	}
}
</style>
